

<template>
  <div class="container">
    <div class="bgPic">
      <div class="bg-blue">
        <el-row class="search">
          <el-input
            v-model="data.table.query_name"
            class="w-2 m-2"
            placeholder="输入企业名称"
            :suffix-icon="Search"
            @keyup.enter="checkresult"
          />
          <el-button type="primary" @click="checkresult"> 查询 </el-button>
        </el-row>
        <el-row class="skl3" :gutter="20">
          <el-col>
            <el-table
              :data="data.table.tableData"
              style="width: 100%"
              height="400px"
            >
              <el-table-column fixed prop="name" label="公司名称" width="120" />
              <el-table-column
                fixed
                prop="index"
                label="评估结果"
                width="120"
              />
              <el-table-column
                fixed
                prop="predict"
                label="风险概率"
                width="140"
              />
              <el-table-column label="偿债能力" align="center">
                <el-table-column prop="LR" label="流动比率" width="160" />
                <el-table-column prop="QR" label="速动比率" width="160" />
                <el-table-column prop="CR" label="现金比率" width="160" />
                <el-table-column prop="DNWR" label="净资产负债率" width="160" />
                <el-table-column prop="ER" label="产权比率" width="160" />
                <el-table-column prop="ICR" label="利息保障倍数" width="160" />
              </el-table-column>
              <el-table-column label="盈利能力" align="center">
                <el-table-column prop="NAIR" label="净资产收益率" width="160" />
                <el-table-column prop="NPMC" label="销售净利率" width="160" />
                <el-table-column prop="ROA" label="总资产报酬率" width="160" />
                <el-table-column
                  prop="ROPC"
                  label="成本费用利润率"
                  width="160"
                />
                <el-table-column prop="JROA" label="总资产净利率" width="160" />
                <el-table-column prop="CROE" label="营业净利率" width="160" />
              </el-table-column>
              <el-table-column label="营运能力" align="center">
                <el-table-column
                  prop="ROST"
                  label="存货周转率(次)"
                  width="160"
                />
                <el-table-column
                  prop="TATO"
                  label="总资产周转率(次)"
                  width="160"
                />
                <el-table-column
                  prop="TOAR"
                  label="应收账款周转率(次)"
                  width="160"
                />
              </el-table-column>
              <el-table-column label="成长能力" align="center">
                <el-table-column
                  prop="GRON"
                  label="净资产增长率%"
                  width="160"
                />
                <el-table-column
                  prop="IROBR"
                  label="营业收入增长率"
                  width="160"
                />
                <el-table-column prop="TAGR" label="总资产增长率" width="160" />
                <el-table-column
                  prop="GROOP"
                  label="营业利润增长率"
                  width="160"
                />
                <el-table-column prop="NPGR" label="净利润增长率" width="160" />
              </el-table-column>
            </el-table>
          </el-col>
          <div class="pt2">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="data.table.total"
              :page-size="data.table.pageSize"
              @current-change="pageChange"
            />
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import "../../css/jquery.bxslider.css";
import "../../css/font-awesome.min.css";
import "../../css/bootstrap.min.css";
import "../../css/animate.css";
import "../../css/style.css";

import { onMounted, reactive } from "vue";

import { genFileId, ElMessage } from "element-plus";

import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import axios from "axios";

let data = reactive({
  table: {
    query_name: "",
    tableData: [],
    page: 2,
    pageSize: 20,
    total: 100,
  },
});

const checkresult = () => {
  getPage();
};

const pageChange = (pageNumber: any) => {
  console.log(pageNumber);
  data.table.page = pageNumber;
  getPage();
};

const getPage = () => {
  data.table.tableData = [];
  axios
    .post("/api/query_for_evaluation/", {
      query_name: data.table.query_name,
      page: data.table.page,
      pageSize: data.table.pageSize,
    })
    .then(function (response) {
      data.table.total = response.data.total;
      console.log(response.data);
      let datalist = response.data.list;
      for (let i = 0; i < datalist.length; i++) {
        let name = datalist[i].fields.name;
        let index = "有风险";
        if (datalist[i].fields.index == 0) {
          index = "无风险";
        }
        data.table.tableData.push({
          name: name,
          index: index,
          predict: datalist[i].fields.predict,
          LR: datalist[i].fields.LR,
          QR: datalist[i].fields.QR,
          CR: datalist[i].fields.CR,
          DNWR: datalist[i].fields.DNWR,
          ER: datalist[i].fields.ER,
          ICR: datalist[i].fields.ICR,
          NAIR: datalist[i].fields.NAIR,
          NPMC: datalist[i].fields.NPMC,
          ROA: datalist[i].fields.ROA,
          ROPC: datalist[i].fields.ROPC,
          JROA: datalist[i].fields.JROA,
          CROE: datalist[i].fields.CROE,
          ROST: datalist[i].fields.ROST,
          TATO: datalist[i].fields.TATO,
          TOAR: datalist[i].fields.TOAR,
          GRON: datalist[i].fields.GRON,
          IROBR: datalist[i].fields.IROBR,
          TAGR: datalist[i].fields.TAGR,
          GROOP: datalist[i].fields.GROOP,
          NPGR: datalist[i].fields.NPGR,
        });
      }
      ElMessage({
        message: "数据拉取成功！",
        type: "success",
      });
    })
    .catch(function (error) {
      ElMessage({
        message: "表格读取失败，请保证已经上传数据并评估 " + error.name,
        type: "warning",
      });
      console.log(error);
    });
};
</script>
<style>
.bg-blue {
  padding: 20px 0 30px 0;
  background-color: #ecf5ff;
}
.intro {
  color: #ffffff;
  font-size: 20px;
}
.search {
  padding: 50px;
  padding-left: 30%;
  width: 100%;
}
.check-result {
  margin: 25%;
  margin-top: 20px;
  height: 400px;
  width: 50%;
  background-color: #fff;
}
.el-input {
  width: 400px;
}
.skl3 {
  padding-bottom: 20px;
}
.pt2 {
  width: 100%;
  height: 100px;
  text-align: center;
  position: relative;
}
.el-pagination {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
